<!-- views/DocumentTemplateView.vue -->
<template>
  <div class="document-template-view">
    <el-tabs v-model="activeTab" type="card">
      <!-- 模板管理 -->
      <el-tab-pane label="模板管理" name="management">
        <template-management
          @edit-template="handleEditTemplate"
          @use-template="handleUseTemplate"
          @create-template="handleCreateTemplate"
        />
      </el-tab-pane>

      <!-- 模板设计 -->
      <el-tab-pane label="模板设计" name="design">
        <template-design 
          :current-template="currentTemplate" 
          @save="handleSaveTemplate"
          @cancel="handleCancelDesign"
        />
      </el-tab-pane>

      <!-- 文档生成 -->
      <el-tab-pane label="文档生成" name="generate">
        <document-generator v-if="selectedTemplate" :template="selectedTemplate" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TemplateManagement from '@/components/TemplateManagement.vue'
import TemplateDesign from '@/components/TemplateDesign.vue'
import DocumentGenerator from '@/components/DocumentGenerator.vue'

const activeTab = ref('management')
const currentTemplate = ref(null)
const selectedTemplate = ref(null)

const handleEditTemplate = (template) => {
  currentTemplate.value = template
  activeTab.value = 'design'
}

const handleUseTemplate = (template) => {
  selectedTemplate.value = template
  activeTab.value = 'generate'
}

const handleCreateTemplate = () => {
  currentTemplate.value = null
  activeTab.value = 'design'
}

const handleSaveTemplate = () => {
  // 保存成功后返回管理页面
  activeTab.value = 'management'
  currentTemplate.value = null
}

const handleCancelDesign = () => {
  // 取消设计返回管理页面
  activeTab.value = 'management'
  currentTemplate.value = null
}
</script>

<style scoped>
.document-template-view {
  padding: 20px;
  background: white;
  border-radius: 8px;
  min-height: 80vh;
}
</style>